<template>
    <div class="itemMusicTop">
        <img :src="playlist.coverImgUrl" alt="" class="bgimg">
        <div class="itemLeft">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <span>歌单</span>
        </div>
        <div class="itemRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-31liebiao"></use>
            </svg>
        </div>

    </div>

    <div class="itemTopContent">
        <div class="contentLeft">
            <img :src="playlist.coverImgUrl" alt="">
            <div class="playCount">
                <svg class="icon" aria-hidden="true" style="width: 0.3rem;height: 0.3rem;">
                    <use xlink:href="#icon-gl-play-copy"></use>
                </svg>
                <span>{{changeCount(playlist.playCount)}}</span>
            </div>
        </div>

        <div class="contentRight">
            <p class="rightP_one">{{playlist.name}}</p>
            <div class="right_img">
                <img :src="playlist.creator.avatarUrl" alt="">
                <span>{{playlist.creator.nickname}}</span>
                <svg class="icon" aria-hidden="true" style="width: 0.2rem;height: 0.2rem;">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
            <p class="rightP_two">
                <span>{{playlist.description}}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </p>
        </div>
    </div>



    <div class="itemTopFooter">
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iconfontzhizuobiaozhun023110"></use>
            </svg>
            <span>{{playlist.commentCount}}</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang"></use>
            </svg>
            <span>{{playlist.shareCount}}</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
            </svg>
            <span>下载</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-show_duoxuan"></use>
            </svg>
            <span>多选</span>
        </div>
    </div>



</template>

<script>
export default {
    setup(props) {
        console.log(props)
        // 通过props进行传值，判断如果数据拿不到，就获取sessionStorage
        if ((props.playlist.creator = "")) {
            props.playlist.creator = JSON.parse(sessionStorage.getItem().playlist).creator
        }
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万'

            }
        }
        return {
            changeCount
        }
    },
    props: ['playlist'],

}
</script>

<style lang="less" scoped>
.itemMusicTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: .2rem;
    position: relative;
    margin-bottom: .4rem;

    .itemLeft,
    .itemRight {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 10px;

        span {
            font-size: .4rem;
            color: #fff;
        }

        .icon {
            fill: #fff // 填充颜色
        }
    }

    .bgimg {
        width: 100%;
        height: 11rem;
        position: fixed;
        z-index: -1;
        filter: blur(15px);
    }

}

.itemTopContent {
    width: 100%;
    height: 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contentLeft {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .2rem;
        position: relative;

        img {
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 10px;

        }

        .playCount {
            position: absolute;
            top: .1rem;
            right: .4rem;
            font-size: small;
            color: white;
        }
    }

    .contentRight {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.1rem;

        p {
            font-size: .26rem;
            color: #fff;
        }

        .right_img {
            width: 100%;
            height: 0.8rem;
            display: flex;
            align-items: center;
            padding: 0 0.1rem;
            margin-top: 0.2rem;


            img {
                width: 0.6rem;
                height: 0.6rem;
                border-radius: 50%;
            }

            span {
                padding-left: 0.4rem;
                font-size: .22rem;
                color: #fff;
            }


        }

        .rightP_two {
            width: 100%;
            height: 0.4rem;

            display: flex;
            justify-content: space-between;

            span {
                display: block;
                width: 90%;
                height: .4rem;
                font-size: .2rem;
                white-space: nowrap; //让文本不换行，在同一行里面
                overflow: hidden; //让超出的范围进行隐藏
                text-overflow: ellipsis; //超出的部分用省略号表示
            }

            .icon {
                width: 0.3rem;
                height: 0.3rem;
            }
        }
    }
}

.itemTopFooter {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .6rem;

    .footerItem {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        svg {
            fill: #fff;
        }

        span {
            color: #fff;
        }

    }
}
</style>